<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼图初始化</title>
	<style>
		*{margin: 0;padding: 0;}
		body{
			text-align: center;
			background-color: #ecf0f1;
		}
		#main{
			position: relative;
			margin: 0 auto;
			width: 1400px;
			height: 1800px;
			background-image: url("../static/img/background.jpg");
			background-size: 100% auto;
		}
		#title{
			padding-top: 30px;
			color: white;
			letter-spacing: 15px;
			font-weight: bolder;
			font-size: 30px;
		}
    	#clearnData{
			position: absolute;
			top: 100px;
			left: 200px;
			width: 1000px;
			height: 1300px;
			border: 1px solid white;
			border-radius: 5px;
		}
		#clearnTitle{
			color: white;
			position: absolute;
			top: 50px;
			left: 540px;
		}
		#tableData{
			margin-top: 10px;
			margin-left: 10px;
			width: 980px;
			height: 300px;
			overflow: auto;
			border-top: 1px solid white;
			border-bottom: 1px solid white;
		}
		#SQL{
			margin-top: 10px;
			margin-left: 10px;
			width: 980px;
			height: 170px;

		}
		table{
			border-collapse: collapse;
		}
		td{
			font-size: 18px;
			font-weight: bold;
			color: white;
			width: 150px;
			line-height: 30px;
			text-align: center;
			border: 1px solid white;
		}
		textarea {
			resize: none;
		}
		#subSQL{
			width: 200px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: bold;
			color: white;
			height: 50px;
			background-color: #678678;
			cursor:pointer;
		}
		#sqlText,#dataText{
			font-size: 18px;
			border-radius: 5px;
		}
		#resultDataHor,#resultDataVer{
			position: absolute;
			bottom: 360px;
			width: 980px;
			height: 300px;
			border:1px solid white;
			margin-top: 10px;
			margin-left: 10px;
			overflow: auto;
		}
		#inputData{
			position: absolute;
			bottom: 100px;
			width: 980px;
			height: 200px;
			margin-top: 10px;
			margin-left: 10px;
		}
		#view{
			position: absolute;
			left: 400px;
			bottom: 20px;
			width: 200px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: bold;
			color: white;
			height: 50px;
			background-color: #678678;
			cursor:pointer;
		}
		#resultTitle{
			color: white;
			text-align: center;
			padding-top: 100px;
		}
		#inputTitle{
			position: absolute;
			bottom: 310px;
			left: 430px;
			color:white;
		}
		#XY{
			position: absolute;
			bottom:670px;
			right: 50px;
			width: 150px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: bold;
			color: white;
			height: 40px;
			background-color: #678678;
			cursor:pointer;
		}
		.curr{
			display: block;
		}
		.none{
			display: none;
		}
</style>
</head>

<body>
<div id="main">
    <h1 id="title">查询并写入数据</h1>
	<div id="clearnData">
	<div id="tableData">
		<table>
		{% for row in data %}
			<tr>
			{% for item in row %}
				<td>{{item|safe}}</td>
			{% endfor %}
			</tr>
		{% endfor %}
		</table>
	</div>
	<div id="SQL">
		<textarea rows="10" cols="90" resize="none" placeholder="写SQL语句，表名为“myTable”" id="sqlText"></textarea>
		<br>
		<button id="subSQL">提交查询</button>
	</div>
	<h1 id="resultTitle">查询结果</h1>
	<button id="XY">XY轴转换</button>
	<div id="resultDataHor" class="curr">
		<table id="resultHor">
		</table>
	</div>
	<div id="resultDataVer" class="none">
		<table id="resultVer">
		</table>
	</div>
	<h1 id="inputTitle">写入数据</h1>
	<form action="/viewPie" method="POST">
	<div id="inputData">
		<textarea rows="10" cols="90" resize="none" name="data" placeholder='圣彼得堡来客	 5.6
陀思妥耶夫斯基全集	1
史记精注全译（全6册） 0.8
加德纳艺术通史	0.5
表象与本质	0.5
其他	3.8' id="dataText"></textarea>
	</div>
	<button id="view">生成图像</button>
	</form>
	</div>

</div>
</body>
<script src="../static/js/jquery.js"></script>
<script type="text/javascript">
	$("#subSQL").click(function(){
		$.ajax({
			url: "/sqlExecute",
			data: {
				sql:$("#sqlText").val()
			},
			type: 'POST',
			dataType: 'JSON',
			beforeSend: function () {
                $('#subSQL').text("查询中");
            },
		}).done(function(data){
			var str1 = ""
			for(var i = 0;i < data.resultHor.length;i++){
				str1 += "<tr>"
				for(var j = 0; j < data.resultHor[i].length; j++){
					str1 += "<td>"+data.resultHor[i][j]+"</td>"
				}
				str1 += "<tr>"
			}
			$("#resultHor").html(str1)
			var str2 = ""
			for(var i = 0;i < data.resultVer.length;i++){
				str2 += "<tr>"
				for(var j = 0; j < data.resultVer[i].length; j++){
					str2 += "<td>"+data.resultVer[i][j]+"</td>"
				}
				str2 += "<tr>"
			}
			$("#resultVer").html(str2)
			$('#subSQL').text("提交查询");
		})
	})
	$("#XY").click(function(){
		var hor = $("#resultDataHor");
		var ver = $("#resultDataVer");
		if(hor.hasClass("curr")){
			hor.attr("class","none");
			ver.attr("class","curr");
		}else{
			hor.attr("class","curr");
			ver.attr("class","none");
		}

	});
	$(document).ready(function(){
 		$("#dataText").text("圣彼得堡来客	5.6"+"\n"+"陀思妥耶夫斯基全集	1"+"\n"+"史记精注全译	0.8"+"\n"+"加德纳艺术通史	0.5"+"\n"+"表象与本质	0.5"+"\n"+"其他	3.8");
	});
	//使文本域有缩进功能
	$("#dataText").keydown(function(e){
        if (e.keyCode == 9) {
	        e.preventDefault();
	        var indent = '    ';
	        var start = this.selectionStart;
	        var end = this.selectionEnd;
	        var selected = window.getSelection().toString();
	        selected = indent + selected.replace(/\n/g, '\n' + indent);
	        this.value = this.value.substring(0, start) + selected
	                + this.value.substring(end);
	        this.setSelectionRange(start + indent.length, start
	                + selected.length);
	    }

	});
</script>
</html>